import { useRouter } from "vue-router"
type TProps = {

}
type IItem = {
  label: string,
  icon: any,
  path: string
}
const FormItem = (props: TProps, ctx: any) => {
  // 传递参数
  const {

  } = props
  const router = useRouter()

  const list: IItem[] = [
    {
      label: '代码运行',
      icon: <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="852" width="50" height="50"><path d="M922.317764 0H101.64469A100.312307 100.312307 0 0 0 1.634036 100.010654V923.989346a100.312307 100.312307 0 0 0 100.010654 100.010654h820.673074a100.299739 100.299739 0 0 0 99.998085-100.010654V100.06093A100.299739 100.299739 0 0 0 922.317764 0zM427.933063 402.04107l-177.321894 103.064894 177.321894 97.094672v81.257871L179.684925 534.831388v-57.477532l248.248138-160.529857z m70.938812 364.661192h-53.970812l78.643542-509.303973h53.958243z m345.393085-231.845736L596.004253 683.445938v-81.257871l177.321894-97.094672-177.321894-103.064894v-85.217071l248.260707 160.542426z" p-id="853" fill="#1296db"></path></svg>,
      path: '/code-compiler'
    },
    {
      label: '五子棋',
      icon:<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1104" width="50" height="50"><path d="M864.019692 64H160.019692a95.980308 95.980308 0 0 0-96.019692 96.019692v704a95.980308 95.980308 0 0 0 96.019692 95.980308h704a96.019692 96.019692 0 0 0 95.980308-96.019692V160.019692a96.019692 96.019692 0 0 0-96.019692-95.980307z m31.980308 96.019692v192h-224.019692V128h192a31.980308 31.980308 0 0 1 32.019692 32.019692z m-115.830154 448a143.990154 143.990154 0 0 0-108.189538-108.189538v-83.849846h224.019692v192.039384h-115.830154zM260.489846 415.940923a128 128 0 0 0 91.529846 91.529846v100.509539H128v-192.039385h132.489846z m247.020308-63.960615a127.960615 127.960615 0 0 0-91.490462-91.529846V128h191.960616v224.019692h-100.43077z m-91.490462 155.490461a127.921231 127.921231 0 0 0 91.490462-91.490461h100.509538v83.810461a144.029538 144.029538 0 0 0-108.189538 108.150154h-83.849846v-100.430769z m83.810462 164.509539a144.029538 144.029538 0 0 0 108.150154 108.150154v115.830153h-191.960616v-224.019692h83.810462z m140.169846 47.970461a79.990154 79.990154 0 1 1 0-159.980307 79.990154 79.990154 0 0 1 0 159.980307zM159.980308 128h192v132.489846a128 128 0 0 0-91.490462 91.529846H128V159.940923a31.980308 31.980308 0 0 1 32.019692-31.980308zM128 864.019692v-192h224.019692v223.980308H159.940923a31.980308 31.980308 0 0 1-31.980308-32.019692z m736.019692 31.980308h-192v-115.830154a143.990154 143.990154 0 0 0 108.150154-108.189538h115.830154v192a31.980308 31.980308 0 0 1-32.019692 32.019692z" fill="#d4237a" p-id="1105"></path></svg>,
      path: ''
    },
    {
      label: '聊天室',
      icon: <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4012" width="50" height="50"><path d="M201.142857 201.142857h621.714286v621.714286H201.142857z" fill="#FFFFFF" p-id="4013"></path><path d="M797.348571 91.337143H225.408A135.314286 135.314286 0 0 0 91.428571 226.816v571.044571a134.802286 134.802286 0 0 0 134.637715 134.729143h571.867428A135.314286 135.314286 0 0 0 932.571429 797.769143V226.816a136.301714 136.301714 0 0 0-135.222858-135.478857zM511.378286 732.690286a328.868571 328.868571 0 0 1-88.246857-11.904 106.422857 106.422857 0 0 0-23.917715 7.314285l-54.363428 33.865143c-15.945143 10.587429-21.211429 6.637714-15.268572-11.940571l11.904-42.459429a81.92 81.92 0 0 0-1.974857-25.234285 228.790857 228.790857 0 0 1-107.465143-187.300572c0-130.797714 125.366857-237.714286 279.314286-237.714286a296.777143 296.777143 0 0 1 227.565714 100.224l-260.022857 123.52a40.667429 40.667429 0 0 1-53.705143-3.291428l-41.837714-37.193143c-19.218286-6.016-25.856 0.658286-19.858286 17.883429l45.092572 109.586285c9.965714 16.603429 25.234286 21.942857 50.450285 3.291429l301.750858-183.954286a209.700571 209.700571 0 0 1 29.824 106.934857c0.073143 131.492571-125.366857 238.372571-279.241143 238.372572z m0 0" fill="#09BB07" p-id="4014"></path></svg>,
      path: '/chat'
    }
  ]

  const goto = (url: string) => {
    router.push(url)
  }

  return (
    <div class="flex gap-3 h-full">
      {
        list.map(item => {
          return <div key={item.path} class='flex flex-column cursor-pointer align-items-center' onClick={() => goto(item.path)}>
            { item.icon }
            <span class='text-sm mt-1'>{ item.label }</span>
          </div>
        })
      }
    </div>
  )
}
export default FormItem
